import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useThemeStore = defineStore(
  'theme',
  () => {
    const theme = ref('')
    const editorTheme = ref('/resource/tinymce/skins/ui/oxide')
    const toggleThem = () => {
      if (theme.value === 'dark') {
        theme.value = ''
        editorTheme.value = '/resource/tinymce/skins/ui/oxide'
        document.documentElement.classList.remove('dark')
      } else {
        theme.value = 'dark'
        editorTheme.value = '/resource/tinymce/skins/ui/oxide-dark'
        document.documentElement.classList.add('dark')
      }
    }
    const initTheme = () => {
      if (theme.value === 'dark') {
        editorTheme.value = '/resource/tinymce/skins/ui/oxide-dark'
        document.documentElement.classList.add('dark')
      } else {
        editorTheme.value = '/resource/tinymce/skins/ui/oxide'
        document.documentElement.classList.remove('dark')
      }
    }
    return { theme, editorTheme, initTheme, toggleThem }
  },
  {
    persist: true
  }
)
